<template>
  <Popup
      :round="round"
      v-model="visible"
      @click-overlay="handleClose"
      :close-on-click-overlay="false"
      :safe-area-inset-bottom="true"
      :transition-appear="true"
      :close-on-popstate="true"
      overlay-class="layer_wrap"
  >
    <div class="layer_inside" :style="getStyle('head')">
      {{info['content']}}
    </div>
  </Popup>
</template>

<script>
import {Popup} from 'vant';
import {pxToVw} from "@/utils/common";

export default {
  name: 'BusinessWinInfo',

  componentName: "BusinessWinInfo",

  props: {
    visible:{
      type: Boolean,
      required: false
    },
    info: {
      type: Object,
      required: true
    },
  },

  components: {
    Popup,
  },

  data() {
    return {
      round: true,
    }
  },

  computed: {
    getStyle() {
      return function (val) {
        const self = this;
        let info = (self.info) || Array();
        let Obj = Object();
        switch (val) {
          case "head":
            Reflect.set(Obj, 'color', (info.color));
            Reflect.set(Obj, 'fontWeight', (info.fontWeight));
            Reflect.set(Obj, "fontSize", pxToVw(info.fontSize));
            return Obj;
        }
      };
    },
  },

  mounted() {
    console.log('init')
  },

  methods: {
    handleClose(){
      console.log('关闭')
      this.$emit('handleCancel');
    }
  },

}
</script>

<style lang="scss" scoped>
@import "./assets/style";
</style>
